import { useEffect, useState } from 'react'
// import { useRequest } from 'ahooks'
import axios from 'axios'
import * as THREE from 'three'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls';
import ToolBar from './ToolBar'
import './index.css'
import { ply_resolver } from '../../compiler'

function Model() {
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.lookAt(new THREE.Vector3(0, 0, 0))
    const webGLRenderer = new THREE.WebGLRenderer()
    webGLRenderer.setClearColor(new THREE.Color(0x000000))
    webGLRenderer.setSize(window.innerWidth, window.innerHeight)
    camera.position.x = 100;
    camera.position.y = 100;
    camera.position.z = 150;

    document.querySelector(".model-canvas")?.appendChild(webGLRenderer.domElement)
    const controls = new TrackballControls(camera, webGLRenderer.domElement)
    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;

    controls.keys = ['KeyA', 'KeyS', 'KeyD'];

    const render = (data: number[][]) => {
      let geometry = new THREE.BufferGeometry();
      let positions: number[] = [];
      let colors: number[] = [];
      let color = new THREE.Color();

      let n = 1000, n2 = n / 2;
      data.forEach(point => {
        let x = point[0];
        let y = point[1];
        let z = point[2];
        positions.push(x, y, z);

        let vx = (x / n) + 0.5;
        let vy = (y / n) + 0.5;
        let vz = (z / n) + 0.5;
        color.setRGB(vx, vy, vz);
        colors.push(color.r, color.g, color.b);
      })
      geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
      geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

      let material = new THREE.PointsMaterial({
        size: 1,
        sizeAttenuation: true,
        vertexColors: true,
        transparent: true,
        opacity: 0.7
      });
      let points = new THREE.Points(geometry, material);
      scene.add(points);

      const axes = new THREE.AxesHelper(500)
      scene.add(axes)

      webGLRenderer.render(scene, camera);
      // let step = 0;

      // (function render() {

      //   step += 0.01;

      //   points.rotation.x = step;
      //   points.rotation.z = step;

      //   requestAnimationFrame(render);
      //   webGLRenderer.render(scene, camera);
      // })()
    }

    // Promise.all([
    //   axios.get('/models/bun0.txt'),
    //   axios.get('/models/bun1.txt'),
    //   // axios.get('/models/bun2.txt')
    // ]).then(datas => {
    //   const data = (datas[0].data + datas[1].data).split(' \r\n').map((row: string) => row.split(' ').map((rawNum) => Number(rawNum) * 1000))
    //   render(data)
    // })
    // axios.get('/models/bun.txt').then((raw) => {
    //   const data = raw.data.split(' \r\n').map((row: string) => row.split(' ').map((rawNum) => Number(rawNum) * 2000))
    //   const complex_data = data.reduce((res: number[][], cur: number[]) => {
    //     for (let i = 0; i < 700; i++) {
    //       res.push([cur[0] + Math.random() * i / 10, cur[1] + Math.random() * i / 10, cur[2] + Math.random() * i / 10])
    //     }
    //     return res
    //   }, [])
    //   console.log(complex_data)
    //   // render(complex_data)
    //   // function animate() {
    //   //   requestAnimationFrame(animate);
    //   //   webGLRenderer.render(scene, camera);
    //   //   controls.update()
    //   // }
    //   // animate()
    // })
    // axios.get('/models/bun_zipper.ply').then((raw) => {
    //   const { data } = raw

    //   const res = ply_resolver(data)

    //   console.log(JSON.stringify(res))

    // })
    axios.get('/models/bun_ir.json').then((raw) => {
      const { data } = raw
    })
  }, [])

  return (
    <div className="model-container">
      <div className="model-canvas"></div>
      <ToolBar />
    </div>
  )
}

export default Model
